<template>
  <div>
    <!--权限管理-->
    <SectionContainer class="u-p20">
      <SectionTitle>权限管理</SectionTitle>

      <!-- 筛选 start -->
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-input
            size="small"
            placeholder="请输入角色名称"
            class="u-w250"
            v-model="filter.roleName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <TableFull
        :data="tableData"
        :total="tableTotal"
        :current-page="page.pageNo"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
        <el-form
          slot="handle"
          class="m-filter"
          inline
        >
          <el-form-item>
            <el-button
              size="small"
              @click="$router.push({
                name: 'other-role-detail',
                query: {
                  action: 'create'
                }
              })"
            >新增</el-button>
          </el-form-item>
        </el-form>
        <template slot="column">
          <el-table-column
            :resizable="false"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="$router.push({
                  name: 'other-role-detail',
                  query: {
                    action: 'edit',
                    id: scope.row.id
                  }
                })"
              >编辑</el-button>
              <el-button
                type="text"
                @click="$router.push({
                  name: 'other-role-detail',
                  query: {
                    action: 'detail',
                    id: scope.row.id
                  }
                })"
              >查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            align="center"
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
          >
            <template slot-scope="scope">
              <!-- 关联账号 -->
              <template v-if="item.prop === 'userCount'">
                <span
                  v-if="scope.row.id !== 34 && scope.row.userCount > 0 && hasPermission([scope.row.roleType === 1 ? 'account_advertiser_page' : 'account_admin_page'])"
                  class="u-link u-cursor"
                  @click="relationAccount(scope.row)"
                >{{scope.row.userCount}}</span>
                <span v-else>{{scope.row.userCount}}</span>
              </template>
              <!-- 状态 -->
              <template v-else-if="item.prop === 'status'">
                {{scope.row.status === 2 ? "启用" : "停用"}}
              </template>
              <!-- 是否启用 -->
              <template v-else-if="item.prop === 'switch'">
                <!-- 有关联账户不让停用 -->
                <el-tooltip
                  v-if="scope.row.userCount > 0 && scope.row.status === 2"
                  class="item"
                  effect="dark"
                  placement="top"
                  content="角色已有关联账号，不可停用"
                >
                  <el-switch
                    disabled
                    @change="changeStatus(scope.row.id, scope.row.status === 2 ? 1 : 2)"
                    :value="scope.row.status"
                    :active-value="2"
                    :inactive-value="1"
                  ></el-switch>
                </el-tooltip>
                <el-switch
                  v-else
                  @change="changeStatus(scope.row.id, scope.row.status === 2 ? 1 : 2)"
                  :value="scope.row.status"
                  :active-value="2"
                  :inactive-value="1"
                ></el-switch>
              </template>
              <!-- 其他 -->
              <template v-else>{{scope.row[item.prop]}}</template>
            </template>
          </el-table-column>
        </template>
      </TableFull>
    </SectionContainer>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import TableFull from "@/components/table-full";
import { hasPermission } from "@/utils";
import permissionMixin from "@/mixins/permission";
import { fetchOtherRoleMan, fetchOtherRoleStatus } from "@/api";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    TableFull
  },
  data() {
    return {
      filter: {
        roleName: ""
      },

      tableColumn: [
        {
          label: "角色名称",
          prop: "name"
        },
        {
          label: "角色描述",
          prop: "remarks"
        },
        {
          label: "关联账号",
          prop: "userCount"
        },
        {
          label: "状态",
          prop: "status"
        },
        {
          label: "是否启用",
          prop: "switch"
        }
      ],
      tableData: [],
      tableTotal: 0,
      page: {
        pageNo: 1,
        pageSize: 50
      }
    };
  },
  methods: {
    hasPermission,

    // 关联账号
    relationAccount({ id, roleType }) {
      // 广告主账户
      if (roleType === 1) {
        this.$router.push({
          name: "account-advertiser-man",
          query: {
            roleId: id
          }
        });
      }
      // 管理员账户
      else if (roleType === 2) {
        this.$router.push({
          name: "account-admin-man",
          query: {
            roleId: id
          }
        });
      }
    },
    // 状态操作
    changeStatus(id, status) {
      return fetchOtherRoleStatus({
        query: {
          id,
          status
        }
      }).then(() => {
        this.$message({
          message: "操作成功",
          duration: 1000
        });
        this.getTable();
      });
    },
    // 重置
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 列表
    getTable() {
      this.tableData = [];
      this.tableTotal = 0;
      fetchOtherRoleMan({
        body: {
          ...this.page,
          roleName: this.filter.roleName
        }
      }).then(res => {
        this.tableTotal = res.data.dataCount;
        this.tableData = res.data.data || [];
      });
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    }
  },
  created() {
    this.getTable();
  }
};
</script>